<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="/layui/css/layui.css">
<style rel="stylesheet" type="text/css">
    .index-page {
        padding: 10px 20px 0;
    }
</style>
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="/client/header::header(null,null)"/>


<body style="background-color: #f2dede">
<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div>条目1</div>
        <div>条目2</div>
        <div>条目3</div>
        <div>条目4</div>
        <div>条目5</div>
    </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->

<script src="/static/build/layui.js"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
<script>
    function selectArticle() {
        var tags = document.getElementById("articleKey").value;
        alert(tags);
        $.post("/user/selectArticleByTags",
            {
                tags: tags
            },
            function (data) {
                window.location.reload();
            }
        )
    }
</script>
<div class="am-g am-g-fixed blog-fixed index-page" style="background-color: whitesmoke">

    <h1 style="color: #2e6da4">活跃班级</h1>
    <hr style="height: 5px;background-color:pink"/>
    <ul class="am-avg-lg-3 am-margin-top-xl am-margin-bottom-lg">
        <th:block th:each="course:${session.courseList.list}">
        <li>
            <div>
                <div style="display: inline-block">
                    <a href="/campus/njxxgc/AssemblyProgramming" target="_blank">
                        <img class="am-circle" th:src="@{/user/img/apple-touch-icon.png}" style="height: 120px;width: 120px">
                    </a>
                </div>
                <ul style="display: inline-block">
                    <li class="of-hidden">
                        <strong>
                            <a th:title="${course.course_name}" th:text="${course.course_name}" href="#" target="_blank"></a>
                        </strong>
                    </li>
                    <li>
                        <a class="am-badge am-badge-success am-round" href="#" th:text="${course.teacher_name}"></a>
                    </li>
                    <li>
                        <a class="am-badge am-badge-success am-round" href="#" th:text="${course.student_num}+'名成员'"></a>
                    </li>
                </ul>
            </div>
        </li>
        </th:block>
<!--        <li>
            <div>
                <div style="display: inline-block">
                    <a href="/campus/zswxy/SE2020-3" target="_blank">
                        <img class="am-circle" src="//common.cnblogs.com/images/icons/edu-class2.png">
                    </a>
                </div>
                <ul style="display: inline-block">
                    <li class="of-hidden">
                        <strong>
                            <a title="2020级软件工程3班" href="/campus/zswxy/SE2020-3" target="_blank">2020级软件工程3班</a>
                        </strong>
                    </li>
                    <li>
                        <a class="am-badge am-badge-success am-round" href="/campus/zswxy">中南林业科技大学涉外学院</a>
                    </li>
                    <li>
                        <a class="am-badge am-badge-success am-round" href="/campus/zswxy">信息与工程学院</a>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div>
                <div style="display: inline-block">
                    <a href="/campus/zjlg/rjjc20" target="_blank">
                        <img class="am-circle" src="//common.cnblogs.com/images/icons/edu-class1.png">
                    </a>
                </div>
                <ul  style="display: inline-block">
                    <li class="of-hidden">
                        <strong>
                            <a title="软件基础20" href="/campus/zjlg/rjjc20" target="_blank">软件基础20</a>
                        </strong>
                    </li>
                    <li>
                        <a class="am-badge am-badge-success am-round" href="/campus/zjlg">浙江理工大学</a>
                    </li>
                    <li>
                        <a class="am-badge am-badge-success am-round" href="/campus/zjlg"></a>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div>
                <div  style="display: inline-block">
                    <a href="/campus/besti/2020-2021-1LKPA" target="_blank">
                        <img class="am-circle" src="//common.cnblogs.com/images/icons/edu-class2.png">
                    </a>
                </div>
                <ul style="display: inline-block">
                    <li class="of-hidden">
                        <strong>
                            <a title="2020-2021-1Linux内核原理与分析" href="/campus/besti/2020-2021-1LKPA" target="_blank">2020-2021-1Linux内核原理与分析</a>
                        </strong>
                    </li>
                    <li>
                        <a class="am-badge am-badge-success am-round" href="/campus/besti">北京电子科技学院</a>
                    </li>
                    <li>
                        <a class="am-badge am-badge-success am-round" href="/campus/besti">网络空间安全系</a>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div>
                <div  style="display: inline-block">
                    <a href="/campus/fzu/DataCollectionandFusionTechnology2020" target="_blank">
                        <img class="am-circle" src="//common.cnblogs.com/images/icons/edu-class1.png">
                    </a>
                </div>
                <ul style="display: inline-block">
                    <li class="of-hidden">
                        <strong>
                            <a title="数据采集与融合技术2020" href="/campus/fzu/DataCollectionandFusionTechnology2020" target="_blank">数据采集与融合技术2020</a>
                        </strong>
                    </li>
                    <li>
                        <a class="am-badge am-badge-success am-round" href="/campus/fzu">福州大学</a>
                    </li>
                    <li>
                        <a class="am-badge am-badge-success am-round" href="/campus/fzu">数学与计算机科学学院</a>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div>
                <div style="display: inline-block">
                    <a href="/campus/zswxy/CST2020-1" target="_blank">
                        <img class="am-circle" src="//common.cnblogs.com/images/icons/edu-class2.png">
                    </a>
                </div>
                <ul style="display: inline-block">
                    <li class="of-hidden">
                        <strong>
                            <a title="2020级计算机1班" href="/campus/zswxy/CST2020-1" target="_blank">2020级计算机1班</a>
                        </strong>
                    </li>
                    <li>
                        <a class="am-badge am-badge-success am-round" href="/campus/zswxy">中南林业科技大学涉外学院</a>
                    </li>
                    <li>
                        <a class="am-badge am-badge-success am-round" href="/campus/zswxy">信息与工程学院</a>
                    </li>
                </ul>
            </div>
        </li>-->
    </ul>
    <br>
    <form action="/user/selectArticleByTags" method="get">
        <span class="icon-search"></span>&nbsp;&nbsp;
        <input type="text" name="tags" id="tags" th:border="1px" th:placeholder="输入要查询的文章关键字">
        <input type="submit" value="查询">
    </form>
    <br>
    <h1 style="color: #2e6da4">最新动态</h1>
    <hr style="height: 5px;background-color:pink"/>
    <div class="am-u-md-8 am-u-sm-12">
        <!-- 文章遍历并分页展示 -->
        <div th:each="article: ${session.articleList.list}">
            <article class="am-g blog-entry-article">
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                    <img width="100%" class="am-u-sm-12" th:src="@{${article.article_img}}"
                         style="width: 200px;height: 200px"/>
                </div>
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color" style="font-size: 15px;"><a th:text="'分类:'+${article.tags}"></a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" th:text="'发布于 '+ ${commons.dateFormat(article.created)}"/>
                    <h2>
                        <div><a style="color: #0f9ae0;font-size: 20px;"
                                th:href="@{/user/selectArticleDetail/}+${article.id}" th:text="${article.title}"/>
                        </div>
                    </h2>
                    <!-- 文章摘要-->
                    <div style="font-size: 16px;" th:utext="${commons.intro(article,75)}"/>
                    <p th:text="'阅读('+${article.view}+')'" style="margin-top: 25px;margin-left: 25px" ></p>
                </div>

            </article>
        </div>
        <!-- 文章分页信息 -->
        <div class="am-pagination">
            <div th:replace="/comm/paging::pageNav(${session.articleList},'上一页','下一页','page')"/>
        </div>
    </div>
    <!--    &lt;!&ndash; 博主信息描述 &ndash;&gt;
        <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title"><span>CrazyStone</span></h2>
                <img th:src="@{/assets/img/me.jpg}" alt="about me" class="blog-entry-img"/>
                <p>
                    Java后台开发
                </p>
                <p>个人博客小站，主要发表关于Java、Spring、Docker等相关文章</p>
            </div>
            <div class="blog-sidebar-widget blog-bor">
                <h2 class="blog-text-center blog-title"><span>联系我</span></h2>
                <p>
                    <a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                    <a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
                </p>
            </div>
        </div>-->
    <!-- 阅读排行榜 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>阅读排行榜</span></h2>
            <div style="text-align: left">
                <th:block th:each="view:${session.viewList}">
                    <a style="font-size: 15px;" th:href="@{'/user/selectArticleDetail/'+${view.getId()}}"
                       th:text="${viewStat.index+1}+'、'+${view.getTitle()}+'('+${view.getView()}+')'">
                    </a>
                    <hr style="margin-top: 0.6rem;margin-bottom: 0.4rem"/>
                </th:block>
            </div>
            <div style="margin-top:100px">
                <h2 class="blog-text-center blog-title"><span>热门推荐</span></h2>
                <marquee scrollAmount="2" scrollDelay="90" onmouseover="this.stop()" onmouseout="this.start()"
                         direction="up" style="width:350px;height:66px;margin-left: 5px; background:#eeeeee">
                    <th:block th:each="recommend:${session.recommendList}">
                        <strong><a th:text="${recommendStat.index+1}+'，'+${recommend.getTitle()}"></a></strong><br>
                    </th:block>
                </marquee>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/client/footer::footer"/>


</html>
